<template>
    <div class="container">
      <el-dialog title="用户信息" :visible.sync="dialogVisible" @close='closeDialog' :close-on-click-modal='false'>
        <el-form :model="dataForm" ref="dataForm" :rules="dataRule" size="mini" label-width="120px" class="common-dialog-height" v-loading="formLoading">
          <el-form-item label="登录帐号：" prop="userName">
            <el-input v-model="dataForm.userName" placeholder="请输入登录帐号" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户名称：" prop="userAlias">
            <el-input v-model="dataForm.userAlias" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="性别：" prop="userSex">
            <el-radio-group v-model="dataForm.userSex">
              <el-radio :label="0">女</el-radio>
              <el-radio :label="1">男</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手机号码：" prop="userPhone">
            <el-input v-model="dataForm.userPhone" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址：" prop="userEmail">
            <el-input v-model="dataForm.userEmail" placeholder="请输入邮箱地址"></el-input>
          </el-form-item>
          <el-form-item label="描述：" prop="userDesc">
            <el-input v-model="dataForm.userDesc" type="textarea" :rows="3" placeholder="请输入用户描述" maxlength="100" show-word-limit></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="formDataSubmit()">修改信息</el-button>
          <el-button @click="dialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
    </div>
</template>
<script>
  import { isMobile, isEmail } from '@/utils/validator'
  export default {
    data () {
      var validateMobile = (rule, value, callback) => {
        if (!isMobile(value)) {
          callback(new Error('手机号码格式不正确!'))
        } else {
          callback()
        }
      }
      var validateEmail = (rule, value, callback) => {
        if (value !== '' && !isEmail(value)) {
          callback(new Error('邮箱格式不正确!'))
        } else {
          callback()
        }
      }
      return {
        dialogVisible: false,
        formLoading: false,
        dataForm: {
          userName: '',
          userAlias: '',
          userSex: 0,
          userPhone: '',
          userEmail: '',
          userDesc: ''
        },
        dataRule: {
          userAlias: [
            { required: true, message: '请输入用户名!', trigger: 'blur' },
            { min: 2, max: 10, message: '用户名长度为2~10个字符!', trigger: 'blur' }
          ],
          userPhone: [
            { required: true, validator: validateMobile, trigger: 'blur' }
          ],
          userEmail: [
            { validator: validateEmail, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init() {
        this.dialogVisible = true
        this.formLoading = true
        this.$http.get(this.$http.adornUrl('/base/userInfo')).then(response => {
          const result = response.data
          if (result && result.code === 200) {
            const data = result.data
            this.dataForm.userName = data.userName
            this.dataForm.userAlias = data.userAlias
            this.dataForm.userSex = data.userSex
            this.dataForm.userPhone = data.userPhone
            this.dataForm.userEmail = data.userEmail
            this.dataForm.userDesc = data.userDesc
          } else {
            this.$message({message: result.msg, type: 'error'})
          }
          this.formLoading = false
        }).catch(reason => {
          this.$message({message: reason, type: 'error'})
          this.formLoading = false
        })
      },
      formDataSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/base/userInfo') ,
              method: 'put',
              data: this.$http.adornData(this.dataForm)
            }).then(response => {
              const result = response.data
              if (result && result.code === 200) {
                const newData = this.dataForm.userAlias
                this.$store.dispatch('user/set_userInfo', newData)
                this.$emit('refreshData', newData)
                this.dialogVisible = false
                this.$message({message: result.msg, type: 'success'})
              } else {
                this.$message({message: result.msg, type: 'error'})
              }
            }).catch(reason => {
              this.$message({message: reason, type: 'error'})
            })

          }
        })
      },
      closeDialog() {
        this.$refs['dataForm'].resetFields()
      }
    }
  }
</script>
<style>
</style>
